<template>
  <section class="member">
    <el-col :span="24" class="action-bar">
			<el-input class="action-bar-input" placeholder="输入姓名或手机号" v-model="searchType"></el-input>
				<el-select v-model="vip_rule_id" placeholder="请选择会员等级" @change="levelChange" style="margin-right:20px">
					<el-option
						v-for="item in levelOptions"
						:key="item.code"
						:label="item.name"
						:value="item.id"
						>
					</el-option>
				</el-select>
			<el-button type="primary" size="medium" @click="search">筛选</el-button>
			<el-button type="primary" size="medium" @click="getUserVipInsert">新增会员</el-button>
			<el-button type="primary" size="medium" @click="exportExcel">导出</el-button>
    </el-col>

    <!--列表-->
		<el-table :data="vipList" highlight-current-row class="el-table-style" id="out-table">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60" sortable>
			</el-table-column>
			<el-table-column prop="vip_card_number" label="会员编号" width="180" sortable>
			</el-table-column>
			<el-table-column prop="realname" label="姓名" width="100" sortable>
			</el-table-column>
			<el-table-column prop="realname" label="照片" width="140" sortable>
				<template slot-scope="scope">
					<div>
						<img :src="scope.row.vip_thumb" @click="prevImg(scope.row.vip_thumb)" alt="" style="width:60px;border-radius:50%;height:60px;object-fit:cover">
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="phone" label="手机" width="120" sortable>
			</el-table-column>
			<el-table-column prop="sexTag" label="性别" width="100" sortable>
			</el-table-column>
			<el-table-column prop="age" label="年龄" width="100" sortable>
			</el-table-column>
			<el-table-column prop="vip_name" label="会员级别" width="120" sortable>
			</el-table-column>
			<el-table-column  label="籍贯" width="120" sortable>
				<template slot-scope="scope">
					<!-- {{ scope.row.home_province}}{{scope.row.home_city}}{{scope.row.home_area}} -->
					{{scope.row.birthplace}}
				</template>
			</el-table-column>
			<el-table-column label="激活状态" prop="status">
					<template slot-scope="scope">
						<div v-show="scope.row.status!=='0'">
							<el-tag type="success">激活</el-tag>
						</div>
						<div v-show="scope.row.status=='0'">
							<el-tag type="info">未激活</el-tag>
						</div>
					</template>
				</el-table-column>
			<el-table-column label="操作" width="700">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" @click="getUserVipUpdate(scope.row.id,scope.row.user_id)">管理</el-button>
					<el-button type="primary" size="mini" @click=" toMemberCompany(scope.row.id,scope.row.id)">绑定企业</el-button>
					<el-button type="primary" size="mini" @click=" updateMember(scope.row.id,scope.row.user_id)">升级会员</el-button>
					<el-button type="primary" size="mini" @click="toMemberPayment(scope.row.id,scope.row.user_id)">缴费清单</el-button>
					<el-button type="Success" size="mini" @click="getUserVipDetail(scope.row.id,scope.row.user_id)">查看详情</el-button>
					<el-button type="danger" class="danger-btn" size="mini" @click="getUserVipDelete(scope.row.id,scope.row.user_id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
				<el-pagination
					background
					:page-size="16"
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="pageChange"
						>
				</el-pagination>
			</div>
    </el-col>
		<adding-membership ref="addingMembership" @update="update"></adding-membership>
		<management-membership ref="managementMembership" @update="update"></management-membership>
		<update-member ref="updateMember" @update="update"></update-member>

		<!-- 查看详情 -->
		<el-dialog title="查看详情" :visible.sync="detailFormVisible" width="50%" >
			<el-form  label-width="80px"  ref="detailForm" label-position="left" inline>
				<el-col :span="24">
					<el-col :span="12">
						<el-form-item label="会员编号" prop="number">
							<div>{{memberDetail.vip_card_number}}</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="激活状态" prop="number" >
							<div v-if="memberDetail.status!=='0'">激活</div>
							<div v-else>未激活</div>
						</el-form-item>
					</el-col>
				</el-col>
				<el-col>
					<el-form-item label="身份证号码" prop="number" label-width="100px">
							<div>{{memberDetail.idCard}}</div>
						</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-col :span="12">
						<el-form-item label="姓名" prop="name">
							<div>{{memberDetail.realname}}</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="手机" prop="phone">
							<div>{{memberDetail.phone}}</div>
						</el-form-item>
					</el-col>
				</el-col>
				<el-col :span="24">
					<el-form-item label="照片">
						<img @click="prevImg(memberDetail.vip_thumb)" :src="memberDetail.vip_thumb" alt="" style="width:100px;height:100px;obj-fit:contain">
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-col :span="12">
						<el-form-item label="性别" prop="sex">
							<div>{{memberDetail.sexTag}}</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="年龄" prop="age">
							<div>{{memberDetail.age}}</div>
						</el-form-item>
					</el-col>
				</el-col>
				<el-col :span="24">
					<el-col :span="24">
						<el-form-item label="会员级别" prop="vip_code">
							<div>{{memberDetail.vip_name}}</div>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="籍贯" prop="origin">
							<div>{{memberDetail.birthplace}}</div>
						</el-form-item>
					</el-col>
				</el-col>
				<el-col :span="24">
					<el-col :span="12">
						<el-form-item label="入会时间" prop="admissionTime">
							<div>{{memberDetail.start_time}}</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="会员到期时间" prop="expires" label-width="120px">
							<div>{{memberDetail.end_time}}</div>
						</el-form-item>
					</el-col>
				</el-col>
				
				<el-col :span="24">
						<el-form-item label="会费标准" prop="cost">
							<div>{{memberDetail.cost_standard?memberDetail.cost_standard:'未有'}}</div>
						</el-form-item>
					</el-col>
				<el-col :span="24">
					<el-col :span="24">
						<el-form-item label="所在地区" prop="expires">
							<div>{{memberDetail.user_province}}{{memberDetail.user_city}}{{memberDetail.user_area}}</div>
						</el-form-item>
					</el-col>
				</el-col>
				<el-col :span="24">
					<el-form-item label="个性化标签" prop="expires" label-width="120px">
						<div  class="labelsList">
							<div v-for="(item,index) of memberDetail.labels" :key="index">{{item.name}}</div>
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-col :span="12">
						<el-form-item label="毕业院校" prop="expires">
							<div>{{memberDetail.graduated_school}}</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="学历层次" prop="expires">
							<div>{{memberDetail.education_level}}</div>
						</el-form-item>
					</el-col>
				</el-col>
				<el-col :span="24">
					<el-form-item label="会员简介" prop="expires">
						<div>{{memberDetail.description}}</div>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<div v-for="(item,index) of memberDetail.companys" :key="index">
						<el-col :span="24">
							<el-col :span="12">
								<el-form-item label="企业名称" prop="unit">
									<div>{{item.company_name}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="职位" prop="expires">
									<div>{{item.position}}</div>
								</el-form-item>
							</el-col>
						</el-col>
						<el-col :span="24">
								<el-form-item label="企业地址" prop="address">
									<div>{{item.company_province}}{{item.company_city}}{{item.company_area}}</div>
								</el-form-item>
							</el-col>
						<el-col :span="24">
							
							<el-col :span="24">
								<el-form-item label="企业经营范围" prop="expires" label-width="120px">
									<div>{{item.company_business_scope}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="企业简介" prop="expires">
									<div>{{item.company_synopsis}}</div>
								</el-form-item>
							</el-col>
						</el-col>
					</div>
				</el-col>
				<el-col :span="24">
					<el-form-item label="会员电子资料" label-width="120px">
						<div class="memberPicWrapper">
							<div class="memberPicDetail" v-for="(item,index) of memberDetail.telecom" :key="index" @click="prevImg(item.thumb)">
								<img :src="item.thumb" alt="">
								<div>{{item.title}}</div>
							</div>
						</div>
					</el-form-item>
				</el-col>
			</el-form>
		</el-dialog>
		<!-- 查看详情 end -->

		<!-- 图片预览 -->
		<el-dialog :visible.sync="prevImgVisible" size="tiny" center width="500px">
			<div style="display:flex;justify-content:center">
				<img style="max-width:100%" :src="dialogImageUrl" alt="">
			</div>
		</el-dialog>
		<!-- 图片预览 end -->
  </section>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import addingMembership from '@/components/memberComponent/addingMembership';//新增弹窗
import managementMembership from '@/components/memberComponent/managementMembership';//新增弹窗
import updateMember from '@/components/memberComponent/updateMember';//新增弹窗
export default {
	data(){
		return {
			//授权表单
			prevImgVisible:false,//图片预览的显示
			dialogImageUrl:'',//预览的图片地址
			auth:{
				phone:'',
				code:''
			},
			memberDetail:'',//查看会员详情的信息
			searchType:'',//筛选的用户名或手机号
			addFormVisible:false,//添加会员的弹窗状态
			detailFormVisible:false,//查看详情弹窗
			page:1,
			totalPage:0,//总页数
			vipList:[],
			vip_rule_id:'',
			levelOptions:''//会员等级
		}
	},
	components:{
		addingMembership,
		managementMembership,
		updateMember
	},
	methods:{
		prevImg(url){
			this.dialogImageUrl=url;
			this.prevImgVisible=true;
		},
		async getUserVipList(searchType=this.searchType){
			//获取会员列表
			const data=await this.$api.getUserVipList({
				page:this.page,
				pagesize:16,
				key_word:searchType,
				vip_rule_id:this.vip_rule_id//搜索的会员等级
			})
			if(data.data.level=='success'){
				let vipList=data.data.data.user_vip_list
				this.vipList=vipList
				this.totalPage=data.data.data.total
			}
		},
		pageChange(e){
			//翻页
			this.page=e;
			this.getUserVipList()
		},
		update(){
			//更改数据
			this.page=1;
			this.getUserVipList();
		},
		getUserVipInsert(){
			//新增会员信息
      this.$refs.addingMembership.showDialog()
		},
		toMemberCompany(id,vipId){
			//绑定企业
			this.$router.push({name:'MemberCompany',params:{vipId:vipId}})
		},
		toMemberPayment(id){
			this.$router.push({name:'MemberPayment',query:{vipId:id}})
		},
		getUserVipUpdate(id,vipId){
			//管理会员信息
			this.$refs.managementMembership.showDialog(id,vipId)
		},
		updateMember(id,vipId){
			//升级会员
			this.$refs.updateMember.showDialog(id,vipId);
		},
		async getUserVipDetail(id,vipId){
			//查看会员详情
			this.detailFormVisible=true;
			const data=await this.$api.getUserVipDetail({
				id,
				vipId
			})
			if(data.data.level=='success'){
				let memberDetail=data.data.data.user_vip_info;

				memberDetail.companys=memberDetail.companys
				this.memberDetail=memberDetail;

			}else{
				this.$message({
					message: data.data.message,
					type: 'error'
					});
				this.memberDetail=''
			}
			
		},
		 getUserVipDelete(id){
			//删除会员
			const judge= this.$confirm('删除该会员?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const res=await this.$api.getUserVipDelete({id});
					if(res.data.level=='success'){
						this.getUserVipList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
          
			});
		},
		search(){
			//筛选
			this.page=0;
			this.getUserVipList(this.searchType,)
		},
	// 	exportExcel () {
    //      /* generate workbook object from table */
    //      var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
    //      /* get binary string as output */
    //      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
    //      try {
    //          FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
    //      } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
    //      return wbout
	//  },

	exportExcel(){
		const judge= this.$confirm('导出会员信息？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const data=await this.$api.getUserVipList({
					})
					if(data.data.level=='success'){
						let vipList=data.data.excel_data
						let res=vipList.map(val=>{
							let obj={};
							obj['会员编号']=val.vip_card_number;
							obj['姓名']=val.realname;
							obj['手机']=val.phone;
							obj['性别']=val.sexTag;
							obj['年龄']=val.age;
							obj['会员级别']=val.vip_name;
							obj['籍贯']=val.birthplace;
							return obj
						})
						this.exportExcelHandle(res);
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
          
			});
	},
	exportExcelHandle(data){
		 let ws = XLSX.utils.json_to_sheet(data);
        let wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "会员");
        var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
         try {
             FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
         } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
         return wbout
	},
	levelChange(id){
		this.vip_rule_id = id;
	},
	async getUserVipRule(){
		//获取会员等级&缴费规则接口
		const data=await this.$api.getUserVipRule();
		if(data.data.level=='success'){
			let list= data.data.data.vip_list;
			this.levelOptions=list;

		}
	},

	},
	mounted() {
		this.getUserVipRule()
		this.getUserVipList();
	},
}
</script>
<style lang='scss' scoped>
  .member{
    .action-bar{
			
			background-color: #f2f2f2;
			height: 60px;
			margin: 10px 0px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #f2f2f2;
			padding: 8px;
			margin: 10px 0px;
			box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}

		.memberPicWrapper{
			display:flex;
			flex-wrap: wrap;
		}
		.memberPicDetail{
			text-align: center;
			margin:0 10px;
			position: relative;
			img{
				width:120px;
				height: 120px;
				object-fit: cover;
				margin:20px;
			}
			.delete{
				width:40px;
				height: 40px;
				position: absolute;
				top:-20px;
				right:-20px;
			}
	}
		.labelsList{
			display: flex;
			div{
				margin:10px;
				border: 1px solid #eee;
				border-radius: 5px;
				padding:5px 10px;
			}
		}
  }
</style>

<style>
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

	.member .el-dialog__body{overflow: auto;}
	.autocomplete{
				width: auto !important;
		}
</style>
